<div class="container-fluid">
    <div class="row">
      <div class="col bg-dark text-white">
        <a class="navbar-brand">SPORTS STORE</a>
      </div>
    </div>
    <div class="row">
      <div class="col mt-2">
        <h2 class="text-center">Your Cart</h2>
        <table class="table table-bordered table-striped p-2">
          <thead>
            <tr>
              <th>Quantity</th>
              <th>Product</th>
              <th class="text-right">Price</th>
              <th class="text-right">Subtotal</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngIf="cart.lines.length == 0">
              <td colspan="4" class="text-center">
                Your cart is empty
              </td>
            </tr>
            <tr *ngFor="let line of cart.lines">
              <td>
                <input type="number" class="form-control-sm"
                       style="width:5em"
                       [value]="line.quantity"
                       (change)="cart.updateQuantity(line.product,
                                  $event.target.value)" />
              </td>
              <td>{{line.product.name}}</td>
              <td class="text-right">
                  {{line.product.price | currency:"USD":"symbol":"2.2-2"}}
              </td>
              <td class="text-right">
                  {{(line.lineTotal) | currency:"USD":"symbol":"2.2-2" }}
              </td>
              <td class="text-center">
                <button class="btn btn-sm btn-danger"
                        (click)="cart.removeLine(line.product.id)">
                  Remove
                </button>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-right">Total:</td>
              <td class="text-right">
                {{cart.cartPrice | currency:"USD":"symbol":"2.2-2"}}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="col">
      <div class="text-center">
        <button class="btn btn-primary m-1" routerLink="/store">
            Continue Shopping
        </button>
        <button class="btn btn-secondary m-1" routerLink="/checkout"
                [disabled]="cart.lines.length == 0">
          Checkout
        </button>
      </div>
    </div>
  </div>
  